<template>
    <el-container class="applet" style="margin-left: 180px">
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-form :model="formData" label-position="top" ref="formData" label-width="100px"
                             class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="15">
                                <el-form-item prop="blessing">
                                    <el-input v-model="formData.index.blessing" placeholder="请填写祝福语"></el-input>
                                </el-form-item>
                                <el-form-item prop="blessing">
                                    <el-input v-model="formData.music" placeholder="请填写音乐编号"></el-input>
                                </el-form-item>
                                <el-form-item style="padding-bottom: 50px">
                                    <el-col :span="8">
                                        背景图 <el-button size="mini" type="danger" @click="delImg('index_bgUrl')">删除</el-button>
                                        <el-upload
                                                class="index-avatar-uploader"
                                                :action="upload"
                                                :headers="myHeaders"
                                                :show-file-list="false"
                                                name="image"
                                                :on-success="handleAvatarSuccessIndexBgUrl"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="formData.index.bgUrl" :src="formData.index.bgUrl"
                                                 class="index-avatar" width="100" height="100">
                                            <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                        </el-upload>
                                    </el-col>
                                    <el-col :span="8">
                                        顶部图 <el-button size="mini" type="danger" @click="delImg('index_imgTop')">删除</el-button>
                                        <el-upload
                                                class="index-avatar-uploader"
                                                :action="upload"
                                                :headers="myHeaders"
                                                :show-file-list="false"
                                                name="image"
                                                :on-success="handleAvatarSuccessIndexImgTop"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="formData.index.imgTop" :src="formData.index.imgTop"
                                                 class="index-avatar" width="100" height="100">
                                            <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                        </el-upload>
                                    </el-col>
                                    <el-col :span="8">
                                        LOGO <el-button size="mini" type="danger" @click="delImg('index_logo')">删除</el-button>
                                        <el-upload
                                                class="index-avatar-uploader"
                                                :action="upload"
                                                :headers="myHeaders"
                                                :show-file-list="false"
                                                name="image"
                                                :on-success="handleAvatarSuccessLogo"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="formData.index.logo" :src="formData.index.logo"
                                                 class="index-avatar" width="100" height="100">
                                            <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                        </el-upload>
                                    </el-col>
                                </el-form-item>

                                <div v-for="(item, index) in formData.list">
                                    <div style="display: flex;justify-content: space-between;padding: 20px 0;height:40px;line-height:40px;">
                                        <div>列表{{index + 1}}</div>
                                        <el-input placeholder="排序" style="display: inline;width: 50%;" v-model="item.sort"></el-input>
                                        <span style="color: red; cursor: pointer" @click="delList(index)">[删除]</span>
                                    </div>

                                    <el-collapse accordion>
                                    <el-collapse-item title="展开/收缩" :name="index">
                                    <el-form-item>
                                        <el-col :span="4">
                                            上左 <el-button size="mini" type="danger" @click="delImg('list_top_left', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListTopLeft"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.top_left" :src="item.top_left"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            上中 <el-button size="mini" type="danger" @click="delImg('list_top_center', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListTopCenter"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.top_center" :src="item.top_center"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            上右 <el-button size="mini" type="danger" @click="delImg('list_top_right', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListTopRight"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.top_right" :src="item.top_right"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            中左 <el-button size="mini" type="danger" @click="delImg('list_center_left', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListCenterLeft"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.center_left" :src="item.center_left"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            中间 <el-button size="mini" type="danger" @click="delImg('list_center_center', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListCenterCenter"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.center_center" :src="item.center_center"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            中右 <el-button size="mini" type="danger" @click="delImg('list_center_right', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListCenterRight"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.center_right" :src="item.center_right"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            下左 <el-button size="mini" type="danger" @click="delImg('list_bottom_left', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListBottomLeft"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.bottom_left" :src="item.bottom_left"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            下中 <el-button size="mini" type="danger" @click="delImg('list_bottom_center', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListBottomCenter"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.bottom_center" :src="item.bottom_center"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            下右 <el-button size="mini" type="danger" @click="delImg('list_bottom_right', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListBottomRight"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.bottom_right" :src="item.bottom_right"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            上 <el-button size="mini" type="danger" @click="delImg('list_top', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListTop"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.top" :src="item.top"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            右 <el-button size="mini" type="danger" @click="delImg('list_right', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListRight"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.right" :src="item.right"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            下 <el-button size="mini" type="danger" @click="delImg('list_bottom', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListBottom"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.bottom" :src="item.bottom"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            左 <el-button size="mini" type="danger" @click="delImg('list_left', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListLeft"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.left" :src="item.left"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                        <el-col :span="4">
                                            背景 <el-button size="mini" type="danger" @click="delImg('list_bgUrl', index)">删除</el-button>
                                            <el-upload
                                                    class="index-avatar-uploader" style="height: 100px"
                                                    :action="upload"
                                                    :headers="myHeaders"
                                                    :show-file-list="false"
                                                    name="image"
                                                    :on-success="handleAvatarSuccessListBgUrl"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="item.bgUrl" :src="item.bgUrl"
                                                     @click="setIndex(index)"
                                                     class="index-avatar" width="100" height="100">
                                                <i v-else @click="setIndex(index)" class="el-icon-plus index-avatar-uploader-icon" style="width: 100px; height: 100px; line-height: 100px"></i>
                                            </el-upload>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item prop="text1">
                                        <el-input v-model="item.text1" placeholder="请填写内容1"></el-input>
                                        <el-input v-model="item.text2" placeholder="请填写内容2"></el-input>
                                        <el-input v-model="item.text3" placeholder="请填写内容3"></el-input>
                                        <el-input v-model="item.text4" placeholder="请填写内容4"></el-input>
                                        <el-input v-model="item.text5" placeholder="请填写内容5"></el-input>
                                        <el-input v-model="item.text6" placeholder="请填写内容6"></el-input>
                                    </el-form-item>
                                    </el-collapse-item>
                                    </el-collapse>
                                </div>

                                <div>
                                    <el-button type="success" @click="addListData">新增列表</el-button>
                                    <el-button type="primary" @click="update('formData')">保存</el-button>
                                    <span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;注意：每次编辑都需要保存, 修改的数据才会生效</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {
        PhotoBingBingUpdate,
        PhotoBingBingList
    } from '@/utils/request';
    import VueNeditorWrap from 'vue-neditor-wrap';
    export default {
        components: {VueNeditorWrap},
        data() {
            return {
                userInfo: this.$storage.get('userinfo'),
                item: "0",//选择上传或修改文章的名字
                index: '',
                formData: {
                    id: 0,
                    name: '',
                    music: '',
                    index: {
                        blessing: '',
                        bgUrl: '',
                        imgTop: '',
                        logo: ''
                    },
                    list: [{
                        top_left: '',
                        top_center: '',
                        top_right: '',
                        center_left: '',
                        center_center: '',
                        center_right: '',
                        bottom_left: '',
                        bottom_center: '',
                        bottom_right: '',
                        top: '',
                        right: '',
                        bottom: '',
                        left: '',
                        text1: '',
                        text2: '',
                        text3: '',
                        text4: '',
                        text5: '',
                        text6: '',
                        text7: '',
                        bgUrl: '',
                        sort: 0
                    }]
                },
                myHeaders: {
                    'Authorization': 'Bearer ' + this.$storage.get('token'),
                    'Accept': 'application/json'
                },
                editor: null,
            }
        },
        activated() {
            this.$store.dispatch('setBingBingActive', '/bingbing');
            this.getList();
            if(this.$route.query.id){
                this.info(this.$route.query.id);
            }
        },
        computed: {
            ...mapGetters(['loading', 'upload']),
        },
        methods: {
            addListData(){
                this.formData.list.push({
                    top_left: '',
                    top_center: '',
                    top_right: '',
                    center_left: '',
                    center_center: '',
                    center_right: '',
                    bottom_left: '',
                    bottom_center: '',
                    bottom_right: '',
                    top: '',
                    right: '',
                    bottom: '',
                    left: '',
                    text1: '',
                    text2: '',
                    text3: '',
                    text4: '',
                    text5: '',
                    text6: '',
                    text7: '',
                    bgUrl: '',
                    sort: this.formData.list.length + 1,
                });
            },
            //上传封面
            handleAvatarSuccessIndexBgUrl(res, file) {
                this.formData.index.bgUrl = res.data;
            },
            handleAvatarSuccessIndexImgTop(res, file) {
                this.formData.index.imgTop = res.data;
            },
            handleAvatarSuccessLogo(res, file) {
                this.formData.index.logo = res.data;
            },
            handleAvatarSuccessListTopLeft(res, file) {
                this.formData.list[this.index].top_left = res.data;
            }, handleAvatarSuccessListTopCenter(res, file) {
                this.formData.list[this.index].top_center = res.data;
            }, handleAvatarSuccessListTopRight(res, file) {
                this.formData.list[this.index].top_right = res.data;
            },handleAvatarSuccessListCenterLeft(res, file) {
                this.formData.list[this.index].center_left = res.data;
            },handleAvatarSuccessListCenterCenter(res, file) {
                this.formData.list[this.index].center_center = res.data;
            },handleAvatarSuccessListCenterRight(res, file) {
                this.formData.list[this.index].center_right = res.data;
            },handleAvatarSuccessListBottomLeft(res, file) {
                this.formData.list[this.index].bottom_left = res.data;
            },handleAvatarSuccessListBottomCenter(res, file) {
                this.formData.list[this.index].bottom_center = res.data;
            },handleAvatarSuccessListBottomRight(res, file) {
                this.formData.list[this.index].bottom_right = res.data;
            },handleAvatarSuccessListTop(res, file) {
                this.formData.list[this.index].top = res.data;
            },handleAvatarSuccessListRight(res, file) {
                this.formData.list[this.index].right = res.data;
            },handleAvatarSuccessListBottom(res, file) {
                this.formData.list[this.index].bottom = res.data;
            },handleAvatarSuccessListLeft(res, file) {
                this.formData.list[this.index].left = res.data;
            },handleAvatarSuccessListBgUrl(res, file) {
                this.formData.list[this.index].bgUrl = res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 < 100;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 100KB!');
                }
                const isSize = new Promise(function (resolve, reject) {
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        resolve();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                });
                return isJPG && isLt2M && isSize;
            },
            getList() {
                PhotoBingBingList({}).then((res) => {
                    this.formData.id = res.data.id;
                    this.formData.name = res.data.name;
                    this.formData.index = JSON.parse(res.data.index);
                    this.formData.list = res.data.list;
                    this.formData.music = res.data.music;
                });
            },
            //更新
            update(formName) {
                PhotoBingBingUpdate(this.formData).then((response) => {
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            duration: '1000',
                            message: response.msg,
                            onClose: () => {
                                this.getList();
                            }
                        });
                    }
                });
            },
            delList(index) {
                this.formData.list.splice(index, 1);
            },
            setIndex(index) {
                this.index = index;
            },
            delImg(name, index) {
                switch (name) {
                    case 'index_bgUrl':
                        this.formData.index.bgUrl = '';
                        break;
                    case 'index_imgTop':
                        this.formData.index.imgTop = '';
                        break;
                    case 'index_logo':
                        this.formData.index.logo = '';
                        break;
                    case 'list_top_left':
                        this.formData.list[index].top_left = '';
                        break;
                    case 'list_top_center':
                        this.formData.list[index].top_center = '';
                        break;
                    case 'list_top_right':
                        this.formData.list[index].top_right = '';
                        break;
                    case 'list_center_left':
                        this.formData.list[index].center_left = '';
                        break;
                    case 'list_center_center':
                        this.formData.list[index].center_center = '';
                        break;
                    case 'list_center_right':
                        this.formData.list[index].center_right = '';
                        break;
                    case 'list_bottom_left':
                        this.formData.list[index].bottom_left = '';
                        break;
                    case 'list_bottom_center':
                        this.formData.list[index].bottom_center = '';
                        break;
                    case 'list_bottom_right':
                        this.formData.list[index].bottom_right = '';
                        break;
                    case 'list_top':
                        this.formData.list[index].top = '';
                        break;
                    case 'list_right':
                        this.formData.list[index].right = '';
                        break;
                    case 'list_bottom':
                        this.formData.list[index].bottom = '';
                        break;
                    case 'list_left':
                        this.formData.list[index].left = '';
                        break;
                    case 'list_bgUrl':
                        this.formData.list[index].bgUrl = '';
                        break;
                    default:
                        break;
                }
            }

        },
    }
</script>
<style scoped>
    .index-avatar-uploader .el-upload {
        max-height: 100px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .index-avatar-uploader-icon {
        border: 1px dashed #d9d9d9;
        font-size: 28px;
        color: #8c939d;
        /*width: 360px;
        height: 288px;
        line-height: 288px;*/
        text-align: center;
    }
    .preview-art {
        background-image: url(../../assets/img/phone.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 780px;
        padding: 75px 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 424px;
        display: inline-block;

    }
    .phone-content-title {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 55px;
        width: 100%;
        background-image: url(../../assets/img/titlebar.png);
    }
</style>
